<template>
	<view class="treeselectcontent">
		<!-- <view class="openbtn" @click="showTree">
        {{ activeitem.name || "请选择" }}
      </view> -->
		<u-form-item :label="item.label" borderBottom ref="item1" :prop="item.value" :required="item.required">
			<view @click="!disabled && showPopup()" style="flex: 1; padding: 0" ref="formitem">

				<!-- {{ activeitem }} -->
				{{ activeitem.fullName || "请选择" }}
			</view>
		</u-form-item>
		<!--  @open="open" -->
		<u-popup :show="show" @close="close" :round="10">
			<view>
				<u-navbar :title="`${item.label}选择`" :leftIcon="false" :autoBack="false" :fixed="false"
					rightIcon="close" @rightClick="close">
				</u-navbar>
				<view style="height: 80vh">
					<levelType ref="levelType" :editfalg="true" @click="levelTypeTap"></levelType>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getProductClassAll
	} from "@/api/index.js";
	export default {
		mixins: [uni.$u.mpMixin, uni.$u.mixin],
		props: {
			item: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			data: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			value: {
				typeof: [String, Number, Boolean, Array, Object],
				default: () => {
					return "";
				},
			},
		},
		data() {
			return {
				show: false,
				list: [],
				listDeptdata: [],
			};
		},
		computed: {
			disabled() {
				this.getParentData("u-form")
				return this.parent.disabled;
			},

			activeitem() {

				let r = this.list.find((e) => {
					return e.id == this.data[this.item.value];
				});

				return r ? r : {};
			},
		},
		watch: {
			item: {
				handler(newValue, oldValue) {
					if (newValue.list) {
						this.list = this.handleTree(this.item.list, "id", "parentId");
						// this.listDeptdata = newValue.list;
					}
					console.log(this.list, "123");
				},
				deep: true,
				immediate: true,
			},
		},
		mounted() {
			this.init();
		},
		methods: {
			async init() {
				const res = await getProductClassAll();
				this.list = res.data;

			},
			// 确定回调事件
			async treeConfirm(e) {},
			// 取消回调事件
			treeCancel(e) {
				console.log(e);
			},
			// 显示选择器
			showPopup() {
				this.show = true;
				if (this.data.level1Type && !this.data.level3Type) {
					let i = this.$refs.levelType.list1.findIndex(e => e.id == this.data.level1Type);
					this.$refs.levelType.list1tap(i);
				}
			},
			close() {
				this.show = false;
			},
			levelTypeTap({
				item1,
				item2,
				item3
			}) {
				this.show = false;
				this.$emit("change", {
					level1Type: String(item1.id),
					level2Type: String(item2.id),
					level3Type: String(item3.id),
				});
				console.log(item1, item2, item3, 4845);
			}
		},
	};
</script>
<style lang="scss" scoped>
	.treeselectcontent {
		flex: 1;

		.openbtn {
			display: flex;
			// justify-content: center;

			align-items: center;
			// height: 100%;
			border: 1px solid #e5e5e5;
			position: relative;
			height: 72rpx;
			padding: 0 20rpx;
			border-radius: 10rpx;

			.iconclear {
				position: absolute;
				right: 10rpx;
			}
		}
	}
</style>